<template>
    <div id="pswlogin">
        <input class="input-css" type="text" placeholder="手机号/邮箱" v-model="tel" @blur="telBlur">
        <input class="input-css" :type="isPsw?'text':'password'" placeholder="登录密码" v-model="psw" @blur="pswBlur">
        <div @click="isPsw=!isPsw" id="psw"><img :src="isPsw?'../../static/icon/显示密码_icon.svg':'../../static/icon/隐藏密码.svg'"></div>
        <button @click="pswLoginClick"  :class="{'button-css':true,'isbg':isTrue}" :disabled="isTrue">立即登录</button>
        <div id="pswlogin-flex">
            <router-link to="/regist"><div>立即注册</div></router-link>
            <router-link to="/forgetPsw"><div>忘记密码</div></router-link>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isPsw:false,
            tel:null,
            psw:null,
        }
    },
    computed:{
        isTrue(){
            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.tel)){
                return true;
            }
            var reg = /^[a-zA-Z\d_]{6,16}$/;
            if(!reg.test(this.psw)){
                return true;
            }
            return false;
        }
    },
    methods:{
        telBlur(){
            var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if(!reg.test(this.tel)){
                this.$vux.toast.show({
                    type:"text",
                    width:"80vw",
                    text:"你输入的手机格式有误，请重新输入！"
                })
            }
        },
        pswBlur(){
            var reg = /^[a-zA-Z\d_]{6,16}$/;
            if(!reg.test(this.psw)){
                this.$vux.toast.show({
                    type:"text",
                    width:"80vw",
                    text:"密码格式错误，密码长度为6-16位！"
                })
            }
        },
        pswLoginClick(){
            var data = {
                tel:this.tel,
                psw:this.psw
            }
            this.$store.dispatch("requestPswLogin",data);
        }
    }
}
</script>
<style scoped>
    #pswlogin{
        margin: 3.92vw;
        position: relative;
    }
    #psw{
        position: absolute;
        width: 5.6vw;
        right: 5vw;
         top: 25vw; 
        z-index: 10;
    }
    img{
        width: 100%;
    }
    #pswlogin-flex{
        display: flex;
        justify-content: space-between;
        font-size: 3.92vw;
        color: #333333;
    }
</style>